[開発プレビュー版] ストレージバケットの操作インターフェースを提供できる Amplify UI コンポーネント「Storage Browser for S3」がアナウンスされたので使ってみた

import { defineStorage } from '@aws-amplify/backend';

export const storage = defineStorage({
    name: 'hogeStorage',
    access: (allow) => ({
      'public/*': [
        allow.guest.to(['read']),
        allow.authenticated.to(['read', 'write', 'delete']),
      ],
      'protected/{entity_id}/*': [
        allow.authenticated.to(['read']),
        allow.entity('identity').to(['read', 'write', 'delete'])
      ],
      'private/{entity_id}/*': [
        allow.entity('identity').to(['read', 'write', 'delete'])
      ]
    })
  });

% npm i --save @aws-amplify/ui-react-storage@storage-browser aws-amplify@storage-browser
npm warn ERESOLVE overriding peer dependency
npm warn While resolving: [email protected]
npm warn Found: [email protected]
npm warn node_modules/aws-amplify
npm warn   peer aws-amplify@"^6.3.2" from @aws-amplify/[email protected]
npm warn   node_modules/@aws-amplify/ui
npm warn     @aws-amplify/ui@"6.1.0" from @aws-amplify/[email protected]
npm warn     node_modules/@aws-amplify/ui-react
npm warn     1 more (@aws-amplify/ui-react-core)
npm warn   4 more (@aws-amplify/ui-react, @aws-amplify/ui-react-core, ...)
npm warn
npm warn Could not resolve dependency:
npm warn peerOptional aws-amplify@"^6.3.2" from @aws-amplify/[email protected]
npm warn node_modules/@aws-amplify/ui-react
npm warn   @aws-amplify/ui-react@"^6.2.0" from the root project
npm warn ERESOLVE overriding peer dependency
npm warn ERESOLVE overriding peer dependency

added 5 packages, changed 13 packages, and audited 1347 packages in 13s

166 packages are looking for funding
  run `npm fund` for details

1 moderate severity vulnerability

To address all issues, run:
  npm audit fix

Run `npm audit` for details.
%

import { Authenticator } from '@aws-amplify/ui-react'
import '@aws-amplify/ui-react/styles.css'
import { useEffect, useState } from "react";
import { StorageBrowser } from '@aws-amplify/ui-react-storage';

const client = generateClient<Schema>();

function App() {
  const defaultPrefixes = [
    'public/',
    (identityId: string) => `protected/${identityId}/`,
    (identityId: string) => `private/${identityId}/`,
  ];

  return (
    <Authenticator>
      {({ signOut }) => (
        <StorageBrowser defaultPrefixes={defaultPrefixes} />
      )}
    </Authenticator>
  );
}

export default App;

% aws s3 ls s3://amplify-amplifyvitereactt-hogestoragebucket4cb73b1-wm01thkhv2uj --recursive
2024-09-06 13:44:55       7815 private/ap-northeast-1:8036753d-d02b-c516-fd1c-391b39c833e2/bbb.xml
2024-09-06 13:28:01       7815 private/ap-northeast-1:8036753d-d06a-c0fb-00c8-533d41a53432/iwasaaws1-68286-metadata.xml
2024-09-06 13:26:41       7815 public/iwasaaws1-68286-metadata.xml